<template>
  <div class="w-1200px m-auto pt-44px">
    <div class="flex flex-justify-between flex-items-center">
      <div class="w-837px">
        <el-input
          v-model="form.keyword"
          class="input w-526px ml-300px"
          placeholder="请输入探索内容"
        >
          <template #suffix>
            <div class="search">搜索</div>
          </template>
        </el-input>
        <div class="w-1200px m-auto mt-32px px-100px">
          <el-row>
            <el-col
              :span="3"
              v-for="item in list"
              :key="item.img"
              class="text-center cursor-pointer hover-text-#bb0615"
              @click="search_type(item.title)"
            >
              <img class="w-73px h-75px" :src="item.img" alt="" />
              <p class="mb-43px text-14px font-600">{{ item.title }}</p>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="mt--20px">
      <ContentHeader headerTitle="专利" en="">
        <Card />
      </ContentHeader>

      <el-pagination
        v-if="number !== 0"
        class="flex flex-justify-center my-30px"
        background
        layout="prev, pager, next"
        :total="100"
        :page-size="10"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import Card from "./components/video_card/index.vue";
import Login from "./components/login.vue";
import Register from "./components/register.vue";
import Forget from "./components/forget.vue";
import { useRouter } from "vue-router";

const $router = useRouter();

const number = ref(1);

const form = reactive({
  keyword: "",
  type: "",
  page: 1,
  page_size: 10,
});

const list = [
  { img: "/zl.png", path: "", title: "专利" },
  { img: "/pp.png", path: "", title: "品牌" },
  { img: "/bq.png", path: "", title: "版权" },
  { img: "/tx.png", path: "", title: "体系" },
  { img: "/qb.png", path: "", title: "情报" },
  { img: "/yy.png", path: "", title: "运营" },
  { img: "/bh.png", path: "", title: "保护" },
  { img: "/zjtx.png", path: "", title: "专精特新" },
];

const go = (path) => {
  $router.push(path);
};

// 分页处理
const handleCurrentChange = (val: number) => {
  form.page = val;
  // get_question_list()
  document.querySelector("html").scrollTop = 550;
};
const search_type = () => {};
</script>

<style scoped>
.name {
  margin-bottom: 20px;
  padding-bottom: 5px;
  font-family: MicrosoftYaHei;
  font-size: 18px;
  font-weight: bold;
  font-stretch: normal;
  line-height: 21px;
  letter-spacing: 2px;
  color: #020202;
  text-align: center;
  border-bottom: 2px solid #020202;
}
.shadow {
  padding: 30px 40px;
  width: 284px;
  background-color: #ffffff;
  box-shadow: 0px 0px 5px 0px rgba(6, 6, 6, 0.21);
  border-radius: 10px;
  border: solid 1px #f3f2f2;
  cursor: pointer;
  font-size: 18px;
}
::v-deep .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: #fff !important;
}
::v-deep .el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 3px solid #bb0615;
  background-color: #fff !important;
}
::v-deep .el-menu-item:hover {
  font-size: 20px;
  border-bottom: 3px solid #bb0615;
  background-color: #fff !important;
}
::v-deep .el-menu-item {
  font-size: 20px;
  line-height: 36px;
}
::v-deep .el-menu--horizontal {
  border-bottom: none;
}
::v-deep .el-dialog {
  height: 550px;
  background-image: url("/login_bg.png");
  background-size: cover;
}
::v-deep .el-pager li.is-active {
  background-color: #bb0615 !important;
}
::v-deep .el-input__wrapper {
  width: 526px;
  border-radius: 22px;
}
::v-deep .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 0.005208rem #c0c4cc inset;
}
.search {
  margin-right: -10px;
  width: 73px;
  height: 44px;
  background-color: #bb0615;
  border-radius: 22px;
  line-height: 42px;
  letter-spacing: 7px;
  color: #fcf7f7;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
.zc {
  width: 159px;
  height: 60px;
  background-color: #bb0615;
  border-radius: 25px;
}
.dl {
  margin-top: 20px;
  width: 159px;
  height: 60px;
  background-color: #bfbfbf;
  border-radius: 25px;
}
</style>
